<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <button id="a" class="b" style="color: red;">1</button>
    <button id="b" class="b">2</button>
    <button id="c" class="b">3</button>

    <p id="p1" style="display: block;">1</p>
    <p id="p2">2</p>
    <p id="p3">3</p>

    <script>

        // 难点：  找下标    indexOf 返回的就是下标   数组的方法

        
        var oBtn1 = document.getElementById('a');
        var oBtn2 = document.getElementById('b');
        var oBtn3 = document.getElementById('c');

        var oBtns = [oBtn1 , oBtn2 , oBtn3] ;   // 数组


        var oP1 = document.getElementById('p1');
        var oP2 = document.getElementById('p2');
        var oP3 = document.getElementById('p3');

        var oPs = [oP1 , oP2 , oP3] ;   // 数组

        // 循环绑定事件
        for(var i = 0 ; i < oBtns.length ; i++) {
            oBtns[i].onclick = function() {

                // 清除所有的颜色和隐藏所有的p
                for(var i = 0 ; i < oBtns.length ; i++) {
                    oBtns[i].style.color = 'black' ;
                    oPs[i].style.display = 'none' ;
                }

                // 给当前的按钮添加颜色
                this.style.color = 'red' ;
                // 给当前的p显示
                var j = oBtns.indexOf(this) ;
                console.log(j);
                oPs[j].style.display = 'block' ;

            }
        }



    </script>

</body>

</html>